import React, {useState, useRef} from "react";

export default function App() {
    const [num, setNum] = useState(0)

    // 缓存变量 重新渲染App函数不会将值变成0
    const ref = useRef(0)

    return <div>
        <div>
            {num}--{ref.current}
            <button onClick={() => {
                setNum(num + 1);
                ref.current++
            }}>+</button>
        </div>
        <div>
            <Ref/>
        </div>
    </div>
}

function Ref() {

    // 绑定一个dom节点 可以获取节点对象
    const myRef = useRef();

    return <div>
        <input ref={myRef}/>
        <button onClick={() => console.log(myRef.current.value)}>click</button>
    </div>
}